import { useState } from "react"
import { useSelector } from "react-redux"
import Selector from "../Selector"

function Header({ Icon }) {
    const [storeIndex, setStoreIndex] = useState(0)
    const [visible, setVisible] = useState(false)
    const data: { id: string, storename: string } = useSelector((store: { user: { storeList: Record<string, any> } }) => (store.user.storeList.data)) || {}
    const handleChangeIndex = (index) => {
        setStoreIndex(index);
        setVisible(false)
    }
    return (
        <>
            <div>
                <h2
                    className='text-[34px] text-center mt-[64px]'
                    style={{ color: 'white' }}
                >
                    超级店长
                </h2>
                <div className='pl-[26px] flex justify-items-center'
                    onClick={() => setVisible(true)}
                >
                    <Icon className='w-[37px] h-[32px] mr-[6px]' />
                    <p
                        className='text-[32px] leading-[27px] text-white'
                        style={{ color: 'white' }}
                    >
                        {data[storeIndex]?.storename || '---'}
                    </p>
                </div>
                <Selector
                    data={data}
                    activeIndex={storeIndex}
                    handleChangeIndex={handleChangeIndex}
                    visible={visible}
                />
            </div>
        </>
    )
}
export default Header